<script setup>
import {defineProps,onMounted,defineEmits,ref} from "vue"

import DMCommand from "./DMCommand.vue"

import gengduo from "../../public/icons/gengduo.svg"
import closeSvg from "../../public/icons/wxMiniFunc.svg"
import sosuo from "../../public/icons/sosuo.svg"
import share from "../../public/icons/share.svg"
/**
 * type:小程序类型,比如:wx_xcx(微信小程序)
 * num:html,css,js选择标记,注意：传入的值不能是同一个
 * xcxName:小程序的名称,在...中点击可查看
 */
const props = defineProps({
    type:{type:String},
    num:{type:Number},
    xcxName:{type:String},
})

const emits = defineEmits(['changNumBtn'])

const sosuoValue = ref(1000)

const inputValue = ref()

const num1 = ref("numStyle")
const num2 = ref("")
const num3 = ref("")
const test = ref("")//测试用

const gengduoRef = ref(null)
const gengduoTagRef = ref(null)
const wx_otherRef = ref(null)
const undevelopedRef = ref(null)

onMounted(()=>{
})

const changeNumBtn1 = async(num) => {
    emits('changNum',{params1:num})
    switch(num){
        case 0:
            num1.value = "numStyle"
            num2.value = ""
            num3.value = ""
            break
        case 1:
            num1.value = ""
            num2.value = "numStyle"
            num3.value = ""
            break
        case 2:
            num1.value = ""
            num2.value = ""
            num3.value = "numStyle"
            break
    }
}
//微信小程序功能键
const menuShare = () => {
    gengduoRef.value.style.opacity = 1
    gengduoTagRef.value.style.transform = "translateY(0)"
    gengduoRef.value.style.zIndex = 10
    wx_otherRef.value.style.zIndex = -1

    
}
const clickGengDuoBtn = () => {
    gengduoRef.value.style.opacity = 0
    gengduoTagRef.value.style.transform = "translateY(50px)"
    gengduoRef.value.style.zIndex = -1
    wx_otherRef.value.style.zIndex = -1
}
const otherBtn = () => {
    wx_otherRef.value.style.opacity = 1
    gengduoRef.value.style.zIndex = -1
    wx_otherRef.value.style.zIndex = 10
}
const closeOtherBtn = () => {
    wx_otherRef.value.style.opacity = 0
    gengduoRef.value.style.zIndex = -1
    wx_otherRef.value.style.zIndex = -1
}
const shareBtn = () => {
    setTimeout(()=>{
        undevelopedRef.value.style.opacity = 0
    },1000)
    undevelopedRef.value.style.opacity = 1
}

const isOver1 = (params) => {
    test.value = params
}
</script>

<template>
    <div class="message">
            <div class="messageDMBox">
                <div class="messageDMDialog" v-if="props.type == 'wx_xcx'">
                    <div class="messageDialog1" @click="changeNumBtn1(0)" :class="num1">index.wxml</div>
                    <div class="messageDialog2" @click="changeNumBtn1(1)" :class="num2">index.wxss</div>
                    <div class="messageDialog3" @click="changeNumBtn1(2)" :class="num3">index.js</div>
                </div>
                <div class="messageDMDialog" v-if="props.type == 'golang'">
                    <div class="messageDialog1" @click="changeNumBtn1(0)" :class="num1">main.go</div>
                    <div class="messageDialog2" @click="changeNumBtn1(1)" :class="num2">go.mod</div>
                </div>
                <div class="messageDM">
                    <slot name="slot1" class="messageDMDetal"></slot>
                </div>
            </div>
            <div class="messageShowBox">
                <!-- 微信小程序 样式 开始-->
                <div class="messageShow" v-if="props.type == 'wx_xcx'">
                    <div class="funcBox">
                        <div class="func1Box">
                            <img :src="gengduo" alt="" @click="menuShare"/>
                        </div>
                        <div class="func2Box">
                            <img :src="closeSvg" alt="" @click="otherBtn"/>
                        </div>
                    </div>
                    <div class="gengduo" ref="gengduoRef">
                        <div class="gengduoKB" @click="clickGengDuoBtn"></div>
                        <div class="gengduoTag" ref="gengduoTagRef">
                            <div class="xcxDetailBox">
                                <!-- imgShare可以是图片也可以是元素 -->
                                <!-- <img src="" alt="" class="imgShare" /> -->
                                <div class="imgShare">
                                    <span>{{ "Test" }}</span>
                                </div>
                                <span class="xcxNameClass">{{ props.xcxName }}</span>
                                <div class="fengexian"></div>
                                <div class="shareBtnClass" @click="shareBtn">
                                    <img :src="share" alt=""/>
                                    <span class="shareNameClass">{{ "分享给朋友" }}</span>
                                </div>
                            </div>
                            <div class="undevelopedBox1" ref="undevelopedRef">{{ "此功能不能在此使用" }}</div>
                        </div>
                    </div>
                    <div class="wx_other" ref="wx_otherRef">
                        <div class="wx_otherFuncBox" >
                            <div class="sosuoImageBox">
                                <img :src="sosuo" alt="" />
                            </div>
                            <div class="funcInputBox">
                                <input type="text" placeholder="查找场景值" v-model="inputValue"/>
                            </div>
                        </div>
                        <div class="funcValueBox">
                            <div class="funcValue1000"  @click="closeOtherBtn" v-if="sosuoValue == 1000">1000:其他</div>
                        </div>
                    </div>
                    <slot name="slot2"></slot>
                </div>
                <!-- 微信小程序 样式 结束-->
                <!-- GoLang 样式 开始 -->
                <div class="messageShowGo" v-if="type == 'golang'">
                    <slot name="golangCommand"></slot>
                </div>
                <!-- GoLang 样式 结束 -->
            </div>
        </div>
</template>

<style scoped>
.message{
    width: 100%;
    height: 100%;
    display: flex;
}
.messageDMBox{
    width: 70%;
    height: 100%;
}
.messageShowBox{
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
}
.messageShow{
    width: 90%;
    height: 90%;
    background-color: #fff;
    border-radius: 10px;
    z-index: 6;
}
.messageShowGo{
    width: 90%;
    height: 90%;
    background-color: rgba(50, 50, 50, 0.5);
    border-radius: 10px;
}
.messageDMDialog{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
}
.messageDM{
    width: 100%;
    height: 90%;
    background: rgba(200, 200, 200, 0.5);
}
.messageDialog1{
    user-select: none;
    margin-left: 15px;
    margin-right: 15px;
    cursor: pointer;
    color: #fff;
    border-bottom: 2px solid #000;
}
.messageDialog2{
    user-select: none;
    margin-right: 15px;
    cursor: pointer;
    color: #fff;
    border-bottom: 2px solid #000;
}
.messageDialog3{
    user-select: none;
    cursor: pointer;
    color: #fff;
    border-bottom: 2px solid #000;
}
.numStyle{
    color: rgba(50, 200, 100, 1);
    border-bottom: 2px solid rgba(50, 200, 100, 1);
}
.funcBox{
    position: relative;
    left: 145px;
    top: 10px;
    width: 100px;
    height: 30px;
    border-radius: 20px;
    background: rgba(200, 200, 200, .5);
    display: flex;
    align-items: center;
    z-index: 999;
}
.func1Box,
.func2Box{
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.func1Box img,
.func2Box img{
    width: 90%;
    height: 80%;
}

.gengduo{
    position: absolute;
    right: 1.5%;
    top: 5%;
    width: 27%;
    height: 90%;
    background-color: rgba(0, 0, 0, .7);
    transition: all 0.3s;
    opacity:0;
    z-index: 5;
}
.wx_other{
    position: absolute;
    right: 1.5%;
    top: 5%;
    width: 27%;
    height: 90%;
    background-color: rgba(0, 0, 0, .7);
    transition: all 0.3s;
    opacity:0;
    z-index: -1;
}
.gengduoKB{
    width: 100%;
    height: 70%;
}

.gengduoTag{
    width: 100%;
    height: 30%;
    background: rgba(230, 230, 230, 1);
    transform: translateY(50px);
    transition: all 0.1s;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.wx_otherFuncBox{
    width: 100%;
    height: 14%;
    background: rgba(0, 0, 0, .7);
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(200, 200, 200, 0.5);
}
.sosuoImageBox{
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sosuoImageBox img{
    width: 60%;
    height: 40%;
}
.funcInputBox{
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.funcInputBox input{
    width: 90%;
    height: 90%;
    border: none;
    outline: none;
    background: none;
    color: #fff;
}
.funcValueBox{
    width: 100%;
    height: 70%;
    background: rgba(0, 0, 0, .7);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.funcValue1000{
    width: 100%;
    height: 15%;
    display: flex;
    align-items: center;
    z-index: 10;
    color: #fff;
}
.funcValue1000:hover{
    background: rgba(0, 250, 150, 1);
}
.xcxDetailBox{
    width: 100%;
    height: 30%;
    display: flex;
    align-items: center;
}
.xcxDetailBox .imgShare{
    margin-left: 2%;
    width: 13%;
    height: 80%;
    background-color: skyblue;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xcxNameClass{
    margin-left: 2%;
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    user-select: none;
}
.fengexian{
    position: absolute;
    left: 5%;
    top: 35%;
    width: 85%;
    height: 0.1%;
    background: rgba(0, 0, 0, .5);
}
.shareBtnClass{
    position: absolute;
    left: 5%;
    top: 46%;
    width: 20%;
    height: 40%;
    background: rgba(255, 255, 255, 1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
.shareBtnClass img{
    width: 70%;
    height: 70%;
    user-select: none;
}
.shareNameClass{
    position: absolute;
    left: 4%;
    top: 105%;
    width: 100px;
    height: 100px;
    font-size: 10px;
    user-select: none;
}
.undevelopedBox1{
    position: absolute;
    left: 20%;
    top: -100%;
    width: 60%;
    height: 30%;
    background: rgba(0, 0, 0, .7);
    border-radius: 10px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}


</style>